<template>
  <div class="box-main">
    <div class="box">
      <span class="num" :style="`transform: translate(-50%, -${data[0].number1 * 10}%)`"
        >0123456789</span
      >
    </div>
    <div class="box">
      <span class="num" :style="`transform: translate(-50%, -${data[1].number2 * 10}%)`"
        >0123456789</span
      >
    </div>
    <div class="box">
      <span class="num" :style="`transform: translate(-50%, -${data[2].number3 * 10}%)`"
        >0123456789</span
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "NumberAn",
  data() {
    return {
      data:[
        {number1:3,randomNumber1:0,intervalId1:null},
        {number2:5,randomNumber2:0,intervalId2:null},
        {number3:6,randomNumber3:0,intervalId3:null},
      ]
    };
  },
  mounted() {
    this.initnumber();
    this.randomhandlenumber1();
    this.randomhandlenumber2();
    this.randomhandlenumber3();
  },
  beforeDestroy(){
    if(this.intervalId1 !==null){
        clearInterval(this.data.intervalId1)
    }
    if(this.intervalId2 !==null){
        clearInterval(this.data.intervalId2)
    }
    if(this.intervalId3 !==null){
        clearInterval(this.data.intervalId3)
    }
  },
  methods: {
    randomhandlenumber1() {
      this.data[0].intervalId1 = setInterval(() => {
        this.data[0].randomNumber1 = Math.floor(Math.random() * 10);
        this.data[0].number1 = this.data[0].randomNumber1;
      }, 3000);
    },
    randomhandlenumber2() {
      this.data[1].intervalId2 = setInterval(() => {
        this.data[1].randomNumber2 = Math.floor(Math.random() * 10);
        this.data[1].number2 = this.data[1].randomNumber2;
      }, 3000);
    },
    randomhandlenumber3() {
      this.data[2].intervalId3 = setInterval(() => {
        this.data[2].randomNumber3 = Math.floor(Math.random() * 10);
        this.data[2].number3 = this.data[2].randomNumber3;
      }, 3000);
    },
    initnumber(){
        this.data[0].number1 = Math.floor(Math.random() * 10);
        this.data[1].number2 = Math.floor(Math.random() * 10);
        this.data[2].number3 = Math.floor(Math.random() * 10);
    }
  },
};
</script>

<style scoped>
.box-main {
  display: flex;
  margin: 0 .125rem;
  width: 1.5rem;
}
.box {
  height: .525rem;
  width: .4rem;
  line-height: .525rem;
  text-align: center;
  background-color: #149373;
  border-radius: .1rem;
  overflow: hidden;
  margin-right: .0625rem;
  position: relative;
  writing-mode: vertical-lr;
  text-orientation: upright;
}
.num {
  position: absolute;
  left: 50%;
  top: .05rem;
  font-size: .4rem;
  color: #ffffff;
  transition: all 1.5s;
}
</style>
